<template>
  <div class="login">
    <!-- <van-nav-bar @click-left="$router.push('/home/find')">
      <template #left>
        <div class="iconfont" style="font-size:40px">
          &#xe637;
        </div>
      </template>
    </van-nav-bar> -->
    <hmNavBar path='/home/find'></hmNavBar>
    <div class="content">
      <h3 class="title">你好,请登录</h3>
      <van-form ref="form">
        <van-field
          name="mobile"
          placeholder="请输入手机号"
          v-model="form.mobile"
          :rules="rules.mobile"
        >
          <template #left-icon>
            <div class="iconfont" style="margin-right:10px">
              &#xe60b;
            </div>
          </template>
        </van-field>
        <van-field
          placeholder="请输入验证码"
          v-model="form.code"
          :rules="rules.code"
        >
          <template #left-icon>
            <i class="iconfont" style="margin-right:10px">
              &#xe60c;
            </i>
          </template>
          <template #button>
            <span class="code" v-if="toastTime === 5" @click="getCode"
              >获取验证码</span
            >
            <!-- 这个span用来显示倒计时时间 就不需要事件了 这里的内容绑定的是data数据里边的时间 -->
            <span class="code" v-else>{{ toastTime }}S</span>
          </template>
        </van-field>
      </van-form>
      <div class="other">
        登录即同意 <span>《用户使用协议》</span> 和 <span>《隐私协议》</span>
      </div>
      <!-- van-button  round 圆角 block 块级元素 color 按钮背景色
       -->
      <van-button
        round
        block
        color="#e40137"
        style="margin-top:44px"
        @click="submit"
        >确定</van-button
      >
    </div>
  </div></template
>

<script>
// import _fetch from '@/api/request.js'
import { auCode, auLogin } from '@/api/login.js'
// 导入token设置方法
import { setToken, getToken } from '@/utils/token.js'
export default {
  data () {
    return {
      // 验证码倒计时时间
      toastTime: 5,
      form: {
        mobile: '', // 手机号
        code: '' // 验证码
      },
      rules: {
        mobile: [
          // 验证规则
          {
            required: true,
            message: '请输入手机号',
            trigger: 'onChange'
          },
          // 手机号自定义校验规则
          {
            validator: value => {
              return /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/.test(
                value
              )
            },
            message: '请正确输入手机号',
            trigger: 'onChange'
          }
        ],
        code: [{ required: true, message: '请输入验证码', trigger: 'onChange' }]
      }
    }
  },
  created () {
    // 如果有token了 用户输入login路由还是会跳转到login页面 这样体验不好 所以要做个判断
    if (getToken('token')) {
      this.$router.push('/home')
    }
  },
  methods: {
    // 点击确定进行全局表单验证
    submit () {
      this.$refs.form
        .validate()
        .then(() => {
          // 登录
          auLogin(this.form).then(res => {
            // window.console.log(res)
            // 保存token
            setToken('token', res.data.data.jwt)
            // window.console.log(getToken('token'))
            // 保存用户信息 到vuex
            this.$store.commit('setUserInfo', res.data.data.user)
            // 修改用户登录状态
            this.$store.commit('setIsLogin', true)
            // 跳转页面
            // 需要进入的页面没有登录导致跳转到登录页的 登录之后应该还回到需要进入的页面
            const _redirect = this.$route.query.redirect
            // 也有可能存在——redirect没有值的情况 所以需要做个判断
            if (_redirect) {
              this.$router.push(_redirect)
            } else {
              this.$router.push('/home')
            }
          })
        })
        .catch(() => {
          alert('验证失败')
        })
    },
    // 验证码点击局部表单验证
    getCode () {
      this.$refs.form
        .validate('mobile')
        .then(() => {
          this.$toast.loading({
            message: '加载中',
            // 时间如果为0 就不会消失
            duration: 0
          })
          // 验证码获取成功之后进入倒计时 为下一次获取作准备
          // 这里使用定时器 定义一个变量time记录定时器 满足条件之后就清除定时器 同时重置时间
          // 遇到的bug
          // 如果计时器放在接口调用成功之后会有bug  那就是验证码可以在一秒内一直点击 停不下来
          // 如果放在接口前 第一秒也可以点击多次 然后才会执行时间--
          // 解决方法 使用定时器之前先让时间-- 再进入定时器 这样它会立即进入第二个span
          this.toastTime--
          const _time = setInterval(() => {
            this.toastTime--
            if (this.toastTime <= 0) {
              clearInterval(_time)
              this.toastTime = 5
            }
          }, 1000)
          auCode({ mobile: this.form.mobile }).then(res => {
            // window.console.log(res)
            // 这里数据请求成功后 会调用success方法
            this.$toast.success(res.data.data)
            // 懒人代码 验证码自动添加到输入框
            this.form.code = res.data.data
          })
        })
        .catch(() => {
          alert('验证失败')
        })
    }
  }
}
</script>

<style lang="less" scoped>
// scoped 只管当前组件和子组件最外层
// 如果想要管到子组件内部 就必须要用::v-deep来进行穿透
.login {
  .content {
    padding: 50px @p15 0;
    .title {
      font-size: 18px;
      font-family: PingFangSC, PingFangSC-Semibold;
      font-weight: 600;
      text-align: left;
      color: #222222;
      line-height: 25px;
      letter-spacing: 0px;
      margin-bottom: 63px;
    }
    .code {
      font-size: 16px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: left;
      color: #00b8d4;
      line-height: 22px;
      letter-spacing: 0px;
    }
    .other {
      font-size: 12px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: left;
      color: #181a39;
      line-height: 16px;
      letter-spacing: 0px;
      margin-top: 15px;
      span {
        color: #00b8d4;
      }
    }
  }
}
</style>
